 <template>
  <div>
    <v-flex>
      <v-data-table :headers="headers" :items="datasource" class="elevation-1">
        <template v-slot:items="props">
          <td class="text-xs-right">{{ props.item.hh }}</td>
          <td class="text-xs-right">{{ props.item.pinm }}</td>
          <td class="text-xs-right">{{ props.item.xingh }}</td>
          <td class="text-xs-right">{{ props.item.tm }}</td>
          <td class="text-xs-right">{{ props.item.sl }}</td>
        </template>
      </v-data-table>
    </v-flex>
  </div>
</template>
<script>
export default {
  name: "form-table1",
  props: {
    datasource: {
      type: Array,
      default: []
    }
  },
  data: () => ({
    dialog: false,
    headers: [
      { text: "货号", align: "left", sortable: false, value: "hh" },
      { text: "品名", align: "left", sortable: false, value: "pinm" },
      { text: "型号", align: "left", value: "xingh", sortable: false },
      { text: "条码", align: "left", value: "tm", sortable: false },
      { text: "数量", align: "left", value: "sl" }
    ],
    editedIndex: -1,
    editedItem: {
      hh: "",
      pinm: "",
      xingh: 0,
      tm: "",
      zhongl: 0,
      chang: 0,
      kuan: 0,
      gao: 0,
      sl: 0
    }
  }),

  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "新增" : "编辑";
    }
  },

  watch: {
    dialog(val) {
      val || this.close();
    }
  },

  created() {
    this.initialize();
  },

  methods: {
    initialize() {
      this.datasource = [];
    }
  }
};
</script>
